<template>
  <div>
    <ve-pie :settings="chartSettings" :extend="chartExtend"></ve-pie>
  </div>
</template>
<script>
import VePie from 'v-charts/lib/pie.common'
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
  props: [ 'userAreas' ],
  components: {
    VePie
  },
  data () {
    this.chartSettings = {
      level: []
    }
    return {
      chartExtend: {
        title: {
          text: '20000/人',
          x: 'center',
          padding: [0, 10, 15, 10]
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: this.userAreas.map(function (str) {
            return str.city
          }),
          itemWidth: 14,
          itemHeight: 14,
          formatter: function (name) {
            return name
          }
        },
        series: [
          {
            name: '地域',
            type: 'pie',
            radius: ['45%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
                formatter: '{b}\n{d}%'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.userAreas.map(function (str) {
              return {
                value: str.cnt,
                name: str.city
              }
            })
          }
        ]
      }
    }
  }
}
</script>
<style lang="less">
.echart{
	min-width:500px;
	min-height: 300px
}
</style>
